<template>
  <el-dialog
      title="修改密码"
      v-model="dialogVisible"
      width="400px"
      @close="closePopup"
  >
    <el-form :model="form" label-width="80px">
      <el-form-item label="旧密码:">
        <el-input v-model="form.password" placeholder="请输入旧密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码:">
        <el-input
            v-model="form.new_password"
            type="password"
            placeholder="请输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="重复:">
        <el-input
            v-model="form.re_new_password"
            type="password"
            placeholder="请重复新密码"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closePopup">取消</el-button>
      <el-button type="primary"
                 :loading="handleChangePasswordLoading"
                 :disabled="handleChangePasswordLoading"
                 @click="handleChangePassword">{{ handleChangePasswordLoading ? '正在修改' : '确认' }}
      </el-button>
    </span>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </el-dialog>
</template>

<script setup>
import {reactive, ref} from 'vue';
import {ElMessage} from "element-plus";
import setting from "@/setting.js";
import {jsonApi} from "@/global.js";

const dialogVisible = ref(false); // 控制弹出框的显示隐藏
const handleChangePasswordLoading= ref(false);
const form =reactive ({
  username: '',
  password: '',
  new_password: '',
  re_new_password: ''
});

let errorMessage = '';

const open = () => {
  dialogVisible.value = true;
};

function closePopup() {
  dialogVisible.value = false;
  errorMessage = ''; // 关闭时清除错误信息
}

async function handleChangePassword() {
  try {
    handleChangePasswordLoading.value=true;
    if(form.new_password !== form.re_new_password){
      ElMessage(
          {
            message: '两次密码不一致',
            type: 'error',
          }
      )
      handleChangePasswordLoading.value=false;
      return;
    }
    const userinfo=JSON.parse(localStorage.getItem('userinfo'))
    console.log(userinfo)
    const JsonBody = {
      username: userinfo.username,
      password: form.password,
      new_password: form.new_password,
    };
    const response = await jsonApi('/user/repassword/',JSON.stringify(JsonBody));
    const data = await response.json();
    if (!response.ok) {
      ElMessage(
          {
            message: data.error,
            type: 'error',
          }
      );
      handleChangePasswordLoading.value=false;
    }else {
      ElMessage(
          {
            message: '修改密码成功',
            type: 'success',
          }
      );
      form.username = '';
      form.password = '';
      form.new_password = '';
      form.re_new_password = '';
      handleChangePasswordLoading.value=false;
      dialogVisible.value = false; // 修改成功后关闭对话框
    }
  } catch (error) {
    ElMessage({
      message: '修改密码失败，请重试。因为：'+error,
      type: 'error',
    });
    handleChangePasswordLoading.value=false;
  }
}
defineExpose({
  open,
});
</script>

<style scoped>
.error {
  color: red;
}
</style>